<template>
  <div class="scroll-wrapper" :style="scrollWrapperStyle">
    <div class="wrapper-content">
      <slot name="content"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, ref} from "vue";

import BScroll, {BScrollInstance} from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
import NestedScroll from '@better-scroll/nested-scroll'
import PullDown from '@better-scroll/pull-down'

BScroll.use(NestedScroll)
BScroll.use(PullDown)
BScroll.use(PullUp)

const {wrapperHeight, wrapperInfo, wrapperConfig} = defineProps({
  wrapperInfo: {
    type: String,
    default: ".scroll-wrapper"
  },
  wrapperHeight: {
    type: String,
    default: "100%"
  },
  wrapperConfig: {
    type: Object,
    default: () => {
    }
  }
})
// 样式
const scrollWrapperStyle = {
  height: wrapperHeight
}
const bs = ref<BScrollInstance>()
onMounted(() => {
  nextTick(() => {
    bs.value = new BScroll(wrapperInfo, wrapperConfig)
  })
})
defineExpose({
  bs
})
</script>

<style scoped lang="less">
.wrapper-content {
  min-height: 100%;
  position: relative;
}
</style>
